<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="resource/jquery-3.4.1.min.js"></script>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul></ul>
    <tb>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tb>
    <script>
        // 匹配标签的第一个元素
        console.log($('ul:first'));
        console.log($('li:first'));
        console.log($('tb:first'));
        console.log($('td:first'));
    </script>
    <ul>
        <li class="a">1</li>
        <li class="a">2</li>
        <li class="b">3</li>
        <li class="c">4</li>
    </ul>
    <script>
        // 匹配除去选中属性外的所有元素
        $("li:not(.a)").css('color','red');
        // 匹配所有索引值为偶数的元素(匹配奇数的元素)
        $("li:even").css('color','yellow');
        // 匹配所有索引值为奇数的元素(匹配偶数的元素)
        $("li:odd").css('color','blue');
        // 匹配索引值对应的元素
        $("li:eq(0)").css('color','purple');
        // 匹配所有大于索引值的元素
        $("li:gt(0)").css('color','green');
        // 匹配最后一个元素
        $('li:last').css('color','#219');
        // 匹配所有小于指定索引的元素
        $('li:lt(3)').css('color','#985');
    </script>
    <h1>1</h1>
    <h2>2</h2>
    <p>3</p>
    <script>
        // 匹配所有标题元素
        $(":header").css('color','red');
        // 匹配文档的根元素(html元素)
        $(":root").css('background','#951');
    </script>
</body>
</html>